<script lang="ts" setup>
// 表单校验 （账号名 + 密码）
import { onMounted, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useRouter } from "vue-router";

import { registerAPI, uploadIdcardImage } from '@/apis/user'
import { sendVerifyCodeAPI } from '@/apis/user'
import FileUpload from 'vue-upload-component';

import type { UploadProps, UploadUserFile } from 'element-plus'
import { el } from 'element-plus/es/locale';
// 1.准备表单对象
const formRef = ref(null)
const form = ref({
    userName: 'admintest',
    userPassword: 'admin123',
    phoneNumber: '17885508213',
    verificationCode: '123456',
    agree: true,
})


// const userStore = useUserStore()
// 2、规则对象
const rules = {
    userName: [
        // 不能为空
        { required: true, message: '用户名不能为空', trigger: 'blur' }
    ],
    userPassword: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '密码不符合规范', trigger: 'blur' }
    ],
    phoneNumber: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '手机号不符合规范', trigger: 'blur' }
    ],
    verificationCode: [
        { required: true, message: '验证码不能为空', trigger: 'blur' },
        { min: 6, max: 6, message: '手验证码不符合规范', trigger: 'blur' }
    ],
    // 身份证照片
    userIdcard1: [
        { required: true, message: '身份证不能为空', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                // 自定义照片验证逻辑，例如检查文件类型、大小等
                // 这里假设要求照片为jpg或png格式
                if (value && !/(jpg|png)$/i.test(value)) {
                    callback(new Error('照片格式不正确，仅支持jpg或png格式'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    userIdcard2: [
        { required: true, message: '身份证不能为空', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                // 自定义照片验证逻辑，例如检查文件类型、大小等
                // 这里假设要求照片为jpg或png格式
                if (value && !/(jpg|png)$/i.test(value)) {
                    callback(new Error('照片格式不正确，仅支持jpg或png格式'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    // 驾驶证
    userDriverCard1: [
        { required: true, message: '驾驶证不能为空', trigger: 'blur' },
        // trigger: 'blur' 表示在失去焦点时触发验证。
        {
            validator: (rule, value, callback) => {
                // 自定义照片验证逻辑，例如检查文件类型、大小等
                // 这里假设要求照片为jpg或png格式
                if (value && !/(jpg|png)$/i.test(value)) {
                    // /(jpg|png)$/i: 是一个正则表达式，用于匹配以 jpg 或 png 结尾的字符串。其中：
                    // ( 和 ): 表示一个分组。
                    // jpg|png: 表示匹配 jpg 或 png。
                    // $: 表示匹配字符串的结尾。
                    // i: 表示不区分大小写。
                    // !: 是逻辑非运算符，表示取反。
                    callback(new Error('照片格式不正确，仅支持jpg或png格式'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    userDriverCard2: [
        { required: true, message: '驾驶证不能为空', trigger: 'blur' },
        // trigger: 'blur' 表示在失去焦点时触发验证。
        {
            validator: (rule, value, callback) => {
                // 自定义照片验证逻辑，例如检查文件类型、大小等
                // 这里假设要求照片为jpg或png格式
                if (value && !/(jpg|png)$/i.test(value)) {
                    // /(jpg|png)$/i: 是一个正则表达式，用于匹配以 jpg 或 png 结尾的字符串。其中：
                    // ( 和 ): 表示一个分组。
                    // jpg|png: 表示匹配 jpg 或 png。
                    // $: 表示匹配字符串的结尾。
                    // i: 表示不区分大小写。
                    // !: 是逻辑非运算符，表示取反。
                    callback(new Error('照片格式不正确，仅支持jpg或png格式'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],

    agree: [
        {
            // 自定义校验
            validator: (rule, value, callback) => {
                console.log(value)
                // 自定义校验逻辑
                // 勾选就通过，不勾选就不通过
                if (value) {
                    // 默认配置不能满足，value是当前输入值
                    callback()
                } else {
                    callback(new Error('请勾选协议'))
                }
            }
        }
    ]
}

// 2、发送验证码倒计时

const countDown = ref(0)

let timer = null
// 等待组件挂载完成
const sendVerificationCode = () => {
    // 在这里处理发送验证码的逻辑，这里只是一个示例

    if (form.value.phoneNumber) {
        // 模拟发送验证码的操作
        const params = ref({
            phoneNumber: ''
        })
        params.value.phoneNumber = form.value.phoneNumber
        console.log(params.value.phoneNumber)
        sendVerifyCodeAPI(params.value)
        // 1.提示用户（ELement ）
        ElMessage({ type: 'success', message: '验证码已发送' })

        // 2设置倒计时为60秒
        countDown.value = 60

        // 3.启动定时器，每秒减少剩余时间
        //   setInterval 函数是 JavaScript 中的一个定时器函数，它可以按照指定的时间间隔（这里是1000毫秒，即1秒）重复执行一个函数或代码块。
        timer = setInterval(() => {
            if (countDown.value > 0) {
                countDown.value--
            } else {
                // 倒计时结束，清除定时器
                clearInterval(timer)
            }
        }, 1000)
    }
    else {
        ElMessage({ type: 'error', message: '请先输入手机号' })
    }

}

// 3.调用注册
// 获取form实例做统一校验，要绑定form表单 ref=“”
const formDataImg = ref([])//上传列表
const fileList = ref([]);//展示列表
const uploadRef = ref(null); // 引用
const uploadFile_success = ref(true); // 初始值为 false
const upload_allowRemove = ref(false) //运行删除回显列表中的文件
const fileListTmp = ref([])
const uploadFile = async (item) => {
    const hasDuplicate = formDataImg.value.some(existingItem => existingItem.name === item.raw.name);
    const hasDuplicateShow = fileList.value.some(existingItem => existingItem.name === item.raw.name);
    fileListTmp.value = fileList.value //暂存插入数据之前的展示列表，方便去重
    if (hasDuplicate == false && fileList.value.length < 4 && hasDuplicateShow == false) {
        uploadFile_success.value = false
        const response = await uploadIdcardImage(item.raw);
        console.log(response)
        // 上传成功后，将返回的图片地址添加到 fileList 中，以便展示
        formDataImg.value.push({
            name: item.name,
            url: response.msg, // 假设后端返回的数据中包含图片地址
        });
        console.log(formDataImg.value)
        if (response.code == 200) {
            ElMessage({ type: 'success', message: item.name + '上传完成' })
            uploadFile_success.value = true
        } else {
            ElMessage({ type: 'error', message: item.name + '上传失败' })
            uploadFile_success.value = true
        }
    } else {
        ElMessage({ type: 'error', message: item.name + '已经存在 或者 上传文件仅限于4个' })
        // 使用 nextTick 来确保更新在组件渲染后执行
        nextTick(() => {
            fileList.value = fileListTmp.value;
        });
        console.log(fileList.value)
    }

}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
        fileListTmp.value = fileList.value //暂存插入数据之前的展示列表，方便去重
        fileListTmp.value.push(uploadFile)
        if (uploadFile_success.value == true) {
            // 查找文件在fileList中的索引
            console.log('更新前的fileList:', fileList.value);
            console.log('更新前的formDataImg:', formDataImg.value);

            const index_fileList = fileList.value.indexOf(uploadFile);
            // 获取要删除文件的文件名
            const fileName = uploadFile.name;

            // 在formDataImg数组中查找文件名对应的索引
            const index_formDataImg = formDataImg.value.findIndex(item => item.name === fileName);
            // const index_formDataImg = formDataImg.value.indexOf(uploadFile);

            if (index_fileList !== -1) {
                // 从fileList中移除文件
                fileList.value.splice(index_fileList, 1);
            }
            if (index_formDataImg !== -1) {
                // 从formDataImg数组中删除相应的项
                formDataImg.value.splice(index_formDataImg, 1);
            }

            // 用于验证的记录更新后的列表
            console.log('更新后的fileList:', fileList.value);
            console.log('更新后的formDataImg:', formDataImg.value);
        } else {
            ElMessage({ type: 'error', message: '当前文件没有上传完成' })
            fileList.value=fileListTmp.value
        }
    
};

const handlePreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}
const submitOrder = () => {
    const dataToSend = {
        userName: form.value.userName,
        password: form.value.userPassword,
        phonenumber: form.value.phoneNumber,
        verificationCode: form.value.verificationCode,
        userDirvercard1: formDataImg.value[0].url,
        userDirvercard2: formDataImg.value[1].url,
        userIdcard1: formDataImg.value[2].url,
        userIdcard2: formDataImg.value[3].url,
    };
    console.log(dataToSend)
    registerAPI(dataToSend)
        .then(response => {
            // 处理成功的情况
            console.log('Registration successful', response);
            if(true){

            }
            ElMessage({ type: 'success', message: '注册成功，请返回登录页面登录' })
        })
        .catch(error => {
            // 处理失败的情况
            console.error('Registration failed', error);
            ElMessage({ type: 'error', message: '注册失败，{}' })
        });
};
const cannotsubmint = () => {
    ElMessage({ type: 'error', message: '上传文件数量错误/文件还未上传完成' })
}
</script>


<template>
    <div>
        <header class="login-header">
            <div class="container m-top-20">
                <h1 class="logo">
                    <RouterLink to="/">小兔鲜</RouterLink>
                </h1>
                <RouterLink class="entry" to="/">
                    进入网站首页
                    <i class="iconfont icon-angle-right"></i>
                    <i class="iconfont icon-angle-right"></i>
                </RouterLink>
            </div>
        </header>
        <section class="login-section">
            <div class="wrapper">
                <nav>
                    <a href="javascript:;">账号注册</a>
                </nav>
                <div class="account-box">
                    <div class="form">
                        <!--:model="form" 指创建的form实例数据填入-->
                        <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px"
                            status-icon>
                            <el-form-item prop="userName" label="账户">
                                <el-input v-model="form.userName" /> <!--v-model调用规则对象-->
                            </el-form-item>
                            <el-form-item prop="userPassword" label="密码">
                                <el-input v-model="form.userPassword" />
                            </el-form-item>
                            <el-form-item prop="phoneNumber" label="手机">
                                <el-input v-model="form.phoneNumber" />
                            </el-form-item>
                            <!-- 发送验证码 -->
                            <el-form-item prop="verificationCode" label="验证码" label-width="74px">
                                <div style="display: flex; align-items: center;">
                                    <el-input v-model="form.verificationCode" />
                                    <el-button type="primary" @click="sendVerificationCode" :disabled="countDown > 0">
                                        {{ countDown > 0 ? `${countDown}s 后重新发送` : '发送验证码' }}
                                    </el-button>
                                </div>
                            </el-form-item>
                            <!-- 文件上传组件 -->
                            <el-upload ref="uploadRef" v-model:file-list="fileList" class="upload-demo" action="#"
                                :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture"
                                accept="image/jpg,image/jpeg,image/png" :on-change="uploadFile" :auto-upload="false">
                                <template #trigger>
                                    <div v-if="uploadFile_success == true">
                                        <el-button type="primary">选择上传文件</el-button>
                                    </div>
                                    <div v-else>
                                        <el-button type="primary" :disabled="true">正在上传文件</el-button>
                                    </div>
                                </template>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        上传照片格式：jpg/png ，且按照驾驶证正、反面，身份证正、反面顺序上传
                                    </div>
                                </template>
                            </el-upload>

                            <!-- doRegister 还没写 -->
                            <div v-if="formDataImg.length == 4">
                                <el-button size="large" class="subBtn" @click="submitOrder">点击注册</el-button>
                            </div>
                            <div v-else>
                                <el-button size="large" class="cannotSub" @click="cannotsubmint">点击注册</el-button>
                            </div>
                        </el-form>
                    </div>
                </div>
            </div>
        </section>

        <footer class="login-footer">
            <div class="container">
                <p style="margin-top: 40%;">
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜儿</p>
            </div>
        </footer>
    </div>
</template>

<style scoped lang='scss'>
.login-header {
    background: #fff;
    border-bottom: 1px solid #e4e4e4;

    .container {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

    }

    .logo {
        width: 200px;

        a {
            display: block;
            height: 132px;
            width: 100%;
            text-indent: -9999px;
            background: url("@/assets/images/logo.png") no-repeat center 18px / contain;
        }
    }

    .sub {
        flex: 1;
        font-size: 24px;
        font-weight: normal;
        margin-bottom: 38px;
        margin-left: 20px;
        color: #666;
    }

    .entry {
        width: 120px;
        margin-bottom: 38px;
        font-size: 16px;

        i {
            font-size: 14px;
            color: $xtxColor;
            letter-spacing: -5px;
        }
    }
}

.login-section {
    background: url('@/assets/images/login-bg.png') no-repeat center / cover;
    height: 488px;
    position: relative;


    .wrapper {
        width: 380px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 54px;
        // transform: translate3d(100px, -160px, 0);
        transform: translate3d(100px, -54px, 0);

        /*跳转div位置*/
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

        nav {
            font-size: 14px;
            height: 55px;
            margin-bottom: 20px;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            padding: 0 40px;
            text-align: right;
            align-items: center;

            a {
                flex: 1;
                line-height: 1;
                display: inline-block;
                font-size: 18px;
                position: relative;
                text-align: center;
            }
        }
    }
}

.login-footer {
    padding: 30px 0 50px;
    background: #fefefe;
    margin-top: 0%;

    p {
        text-align: center;
        color: #999;
        padding-top: 20px;

        a {
            line-height: 1;
            padding: 0 10px;
            color: #999;
            display: inline-block;

            ~a {
                border-left: 1px solid #ccc;
            }
        }
    }
}

.account-box {
    .toggle {
        padding: 15px 40px;
        text-align: right;

        a {
            color: $xtxColor;

            i {
                font-size: 14px;
            }
        }
    }

    .form {
        padding: 0 20px 20px 20px;

        &-item {
            margin-bottom: 28px;

            .input {
                position: relative;
                height: 36px;

                >i {
                    width: 34px;
                    height: 34px;
                    background: #cfcdcd;
                    color: #fff;
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 18px;
                }

                input {
                    padding-left: 44px;
                    border: 1px solid #cfcdcd;
                    height: 36px;
                    line-height: 36px;
                    width: 100%;

                    &.error {
                        border-color: $priceColor;
                    }

                    &.active,
                    &:focus {
                        border-color: $xtxColor;
                    }
                }
            }

            .error {
                position: absolute;
                font-size: 12px;
                line-height: 28px;
                color: $priceColor;

                i {
                    font-size: 14px;
                    margin-right: 2px;
                }
            }
        }

        .agree {
            a {
                color: #069;
            }
        }

        .btn {
            display: block;
            width: 100%;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            background: $xtxColor;

            &.disabled {
                background: #cfcdcd;
            }
        }
    }

    .action {
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .url {
            a {
                color: #999;
                margin-left: 10px;
            }
        }
    }
}

.subBtn {
    background: $xtxColor;
    width: 100%;
    color: #fff;
}

.cannotSub {
    background: rgb(185, 246, 243);
    width: 100%;
    color: #fff;
}

//上传图片部分

.upload-container {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
}

.my-button {
    position: relative;
    left: 14px;
}
</style>